Categories: All Free JavaScripts/ Applets
Tutorials References

Home

Free
JavaScripts

Tutorials ▼

References
▼

Applets

Coding Forums

Freewarejava

JavaScript Tutorials DHTML/ CSS Web
Building Tutorials

JS
Reference DOM Reference IE
Filters Reference CSS
Reference

Home / Free JavaScripts / Image Slideshows
& Galleries / Here

Cut & Paste Random Transitions Slideshow

Credit: JavaScript
Kit

Description: This is an image plus text
description slideshow that brings each image into view using 1 of 17 randomly
chosen Transitional
effects in IE browsers. For other browsers that don't support these built in
effects, a custom fade transition is used instead. Each image can be optionally
hyperlinked with a text description beneath it, and the slideshow pauses when
the user moves the mouse over it. When it comes to transitions, the more the
merrier!

Examples:

Directions

Step 1: Add the below into the <HEAD> of your
page:

<style type="text/css">

.flashclass{ /*sample CSS class added to image slideshow container*/
width: 200px; /*a width should be defined for transition to work*/
border: 5px solid orange;
padding: 5px;
}

.flashclass img{
border-width: 0;
}

</style>

<script type="text/javascript" src="transitionshow.js">

/***********************************************
* Random Transitions Slideshow- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

You should download the below .js file, which the code above references:

transitionshow.js

Step 2: Where you wish the slideshow to appear inside the
BODY, add the following sample invocation code:

<script type="text/javascript">

var flashyshow=new flashyslideshow({ //create instance of slideshow
wrapperid: "myslideshow", //unique ID for this slideshow
wrapperclass: "flashclass", //desired CSS class for this slideshow
imagearray: [
["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
["spring.jpg", "", "", "Flowers spring back to life in Spring."],
["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
],
pause: 2000, //pause between content change (millisec)
transduration: 1000 //duration of transition (affects only IE users)
})

</script>

Make sure the property "wrapperid" is set to an
arbitrary but unique string for each instance of the slideshow on your
page. The images you wish to show are defined within the array
"imagearray":

imagearray: [
["summer.jpg",
"http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer
getaway."],
["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "",
"Winter is nice, as long as there's snow right?"],
["spring.jpg", "",
"", "Flowers spring back to life in Spring."],
["autumn.jpg", "", "",
"Ah the cool breeze of autumn."]
],

where each image is specified with the following settings:

["image_path", "optional_image_link",
"optional_link_target", "optional_text_description],

CSS Library | JavaScript
& DHTML Menus | Cheap Printer Ink | Build a website | Software Geek | eUKhost- Web Hosting | Web Templates | Exchange Hosting

JavaScript Tools:

Password
generator

Popup Window
generator

onMouseover
whipper

Combo box whipper

Meta Tags
Generator

HTML Validation Tool

Site Info

Advertising Info

Submit a
script

Link to Us!

Email Us

Privacy Statement

CopyRight © 1998-2010 JavaScript Kit. NO PART may be
reproduced without author's permission.